<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    {include file="layout:_meta" /}
    <style>
        #addressBox{height:20px;width:600px;}
        #mapBox{height:400px;width:600px}
        #pointBox{height:20px;width:600px;}
        #search{border: 1px #a79f9f solid;background: #ffff;padding: 2px 10px;border-radius: 5px;}
    </style>
    <title>编辑</title>
</head>
<body>
<article class="cl pd-20">
    <form class="form form-horizontal" id="form-admin">


<!--        <div class="row cl">-->
<!--            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>公司服务电话：</label>-->
<!--            <div class="formControls col-xs-8 col-sm-9">-->
<!--                <input type="number" oninput="if(value.length>11)value=value.slice(0,11)" class="input-text" v-model="model.mobile" placeholder="请输入电话">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="row cl">-->
<!--            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>基本磨刀费用：</label>-->
<!--            <div class="formControls col-xs-8 col-sm-9">-->
<!--                <input type="number" class="input-text" v-model="model.basic_price"  placeholder="基本磨刀费用">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="row cl">-->
<!--            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>大于10小时：</label>-->
<!--            <div class="formControls col-xs-8 col-sm-9">-->
<!--                <input type="number" class="input-text" v-model="model.repair_10"  placeholder="大于10小时">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="row cl">-->
<!--            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>大于24小时递增：</label>-->
<!--            <div class="formControls col-xs-8 col-sm-9">-->
<!--                <input type="number" class="input-text" v-model="model.repair_24"  placeholder="大于24小时">-->
<!--            </div>-->
<!--        </div>-->

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">上传首页广告：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="btn-upload">
                  <a href="javascript:void();" class="btn btn-primary radius btn-upload"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                  <input @change="morechangeImg($event)" type="file" class="input-file" multiple />
                </span>
                <div class="upload_warp_img" style="margin-top: 6px;" v-show="model.ad.length>0">
                    <div class="upload_warp_img_div" v-for="(item,index) of model.ad" >
                        <div class="upload_warp_img_div_top" >
                            <div class="upload_warp_img_div_text"></div>
                            <img src="/static/admin/hui/static/h-ui.admin/images/del.png" class="upload_warp_img_div_del" @click="deleteMoreImg(index)">
                        </div>
                        <img :src="item">
                    </div>
                </div>
            </div>
        </div>
        <br><br>
        <div class="row cl">
<!--            col-sm-offset-3 col-xs-offset-4-->
            <div class="col-xs-8 col-sm-9   col-sm-offset-1 col-xs-offset-1  ">
                <input class="btn btn-primary radius" v-on:click="doSubmit()" value="提交">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
{include file="layout:_footer" /}
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript">
    var model = {
        model: {
            ad:[]
        }
    };


    var store_model = new Vue({
        el: "#form-admin",
        data: model,
        methods: {

            //上传多图
            morechangeImg: function(e) {
                var _this = this;
                var imgLimit = 1024;
                var files = e.target.files;
                //var image = new Image();
                var formData = new FormData();
					formData.append('file_path', 'config');
                if(files.length>0){
                    var dd = 0;
                    var timer = setInterval(function(){
                        if(files.item(dd).type != 'image/png'&&files.item(dd).type != 'image/jpeg'&&files.item(dd).type != 'image/gif'){
                            return false;
                        }

                        // image.src = window.URL.createObjectURL(files.item(dd));
                        // image.onload = function(){
                        //     if(_this.model.ad.length<9){
                        //         var base64 = util.getBase64Image(image);
                        //         _this.model.ad.unshift(base64);
                        //     }
                        // }

                        formData.append('file', files.item(dd));
                        $.ajax({
                            url: '/admin/index/uploads',//这里是后台接口需要换掉
                            type: 'POST',
                            dataType: 'json',
                            cache: false,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: (res) => {
                                if(res.link){
                                    _this.model.ad.unshift(res.link);
                                }
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        });

                        if(dd<files.length-1){
                            dd++;
                        }else{
                            clearInterval(timer);
                        }
                    },100)
                }
            },
            //删除多张图片
            deleteMoreImg: function(index){
                this.model.ad.splice(index,1);
            },
            doSubmit: function () {
                var _this = this;

                $.ajax({
                    type: 'post',
                    data: _this.model,
                    url: "{:url('user/config')}",
                    cache: false,
                    dataType: 'json',
                    success: function (ret) {
                        if (ret.status == true) {
                            layer.msg(ret.message, function () {
                                layer_close();
                            })
                        } else {
                            layer.msg(ret.message);
                        }
                    }
                });
            }
        }
    });

    util.get("{:url('user/config')}", {},function (data) {
        if(data) store_model.model = data;
    });


</script>
</body>
</html>
